<template>
  <div>
    <input-table style="width:100%"
                 v-model="folders" @add="v=>{ v.config = { docker: {}, k8sDeployment : {} } ; v.name = ''; }">
      <el-table-column align="center" label="项目路径" minWidth="280">
        <template v-slot="scope">
          <div style="display: flex;align-items: center;">
            <el-input v-model="scope.row.path" style="flex:1"
                      placeholder="点(.)表示根路径"
                      chk=": if(value.startsWith('/')) return '不能以/开头'; if(value.endsWith('/')) return '不能以/结束'; "
            />
            <span v-if="scope.row.path == '.' " style="color:red;margin-left: 10px;">提示：根目录!</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="应用名" minWidth="220">
        <template v-slot="scope">
          <el-input v-model="scope.row.name" />
<!--                    chk=": if( value.startsWith(data.value.productLine.code) == false) return '必须以产品线编码' + data.value.productLine.code  +'开头' "-->
        </template>
      </el-table-column>

      <el-table-column align="center" label="中文名称" minWidth="160"  v-if="!$model.isLib">
        <template v-slot="scope">
          <el-input v-model="scope.row.cnname"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="编译脚本" width="110" v-if="!$model.isLib">
        <template v-slot="scope">
          <el-button size="small" @click="hook_click(scope.row,'buildScript')"
                     :type="scope.row.buildScript ? 'warning' : ''">buildScript
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="Dockerfile | K8sDeployment" width="260">
        <template v-slot="scope">
          <div style="display: flex;justify-content: space-between;gap:10px;">

            <selector v-model="scope.row.config.docker.id" :enum-count="0" :clearable="true" :auto1="false"
                      :data="langDockers"
                      fields="id,name" @change="(v,m)=>scope.row.config.docker.name=m.name"></selector>


            <selector v-model="scope.row.config.k8sDeployment.id" :enum-count="0" :clearable="true"
                      :auto1="false"
                      :data="$data.k8syamls" fields="id,name"
                      @change="(v,m)=>scope.row.config.k8sDeployment.name=m.name"></selector>
          </div>
        </template>
      </el-table-column>
    </input-table>
    <div style="line-height: 1.8">
      Jenkins任务名称 = k8s svc名称 =
      <el-tag>应用名</el-tag>
      -node<br/>
      <el-tag>编译脚本</el-tag> 是指 <el-tag>package.json</el-tag> 中 <el-tag>script</el-tag> 里的构建脚本，默认是  build
    </div>

    <el-dialog :title="$data.row.name + ' 自定义部署配置'" v-model="$data.folderConfigVisible" width="80%">
      <folder-config v-model="$data.row.config" @click="ok_click"></folder-config>
    </el-dialog>

    <el-dialog v-model="$data.dlg_show" width="66vw" style="text-align: center">
      <el-input v-model="$data.dlg_input" type="textarea" :rows="20" style="width:60vw;"></el-input>

      <div style="text-align: center;margin-top: 8px;">
        <el-button @click="hook_ok_click">确定</el-button>
        <label style="margin-left: 4px;">
          <el-tag>package.json</el-tag>
          中
          <el-tag>script</el-tag>
          里的构建脚本，默认是 build</label>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>


import folderConfig from "./folder-config.vue"




defineOptions({
  name: "node-list",
  inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  "dockers": [], "k8syamls": [],
  "row": {}, "folderConfigVisible": false,
  dlg_show: false,
  dlg_row: null,
  dlg_field: null,
  dlg_input: null
});

// const row = $computed(function () {
//   return $data.row;
// });
const $props = defineProps({});


const $model = defineModel({type: Object});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);

const langDockers = $computed(function () {
  return $data.dockers.filter(it => it.language == $model.value.language)
});

const folders = $computed({
  get() {
    return Object.assign($model.value.folders);
  }, set(folders) {
    var v = Object.assign({}, $model.value);
    v.folders = folders;
    $emit("update:modelValue", v);
  }
});

const config_click = function (row) {
  $data.row = row;
  $data.folderConfigVisible = true;
};
const ok_click = function (config) {
  jv.info("在外面保存！")
  $data.row.config = config;
  $data.folderConfigVisible = false;
};


const hook_click = function (row, field) {
  $data.dlg_show = true;
  $data.dlg_row = row;
  $data.dlg_field = field;
  $data.dlg_input = $data.dlg_row[$data.dlg_field];
};
const hook_ok_click = function () {
  $data.dlg_show = false;
  $data.dlg_row[$data.dlg_field] = $data.dlg_input;
};

onMounted(function () {
  jv.$http.post("/dev/user-dockerfile/list?excludes=dockerfile").then(res => {
    $data.dockers = res.data.data;
  });
  jv.$http.post("/dev/user-k8s-deployment/list?excludes=yaml").then(res => {
    $data.k8syamls = res.data.data;
  });
});


</script>